<template>
  <div class="addcompany">
    <el-dialog :title="title" :visible="showaddcompany" @close="onClose">
      <!-- 表单 -->
      <el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="140px" class="demo-ruleForm" style="padding-right:150px">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="addForm.shortName" />
        </el-form-item>

        <el-form-item label="所属公司" prop="company">
          <el-input v-model="addForm.company" />
        </el-form-item>

        <el-form-item>
          <el-row type="flex">
            <span>https://www.tianyancha.com （在此可查询所属公司全称及简称）</span>
          </el-row>
        </el-form-item>

        <el-form-item label="城市地区" prop="city">
          <el-select v-model="addForm.city" placeholder="请选择活动区域" style="width:49%;margin-right:2%" @change="cityChange">
            <el-option v-for="(item, index) in city" :key="index" :label="item" :value="item" />
          </el-select>
          <el-select v-model="addForm.province" placeholder="请选择活动区域" style="width:49%" @change="provincechange">
            <el-option v-for="(item, index) in province" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="addForm.tags" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="addForm.remarks" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button @click="onClose">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { editCompanys, addCompanys } from '@/api/companys';
import { provinces, citys } from '@/assets/citys';
export default {
  name: '',
  components: {},
  props: {
    showaddcompany: {
      type: Boolean,
      default: false
    },
    addForm: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      rules: {
        shortName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        company: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
        city: [{ required: true, message: '请选择城市地区', trigger: 'change' }],
        tags: [{ required: true, message: '请输入方向（企业标签）', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      city: '',
      province: '',
      cityValue: '',
      provinceValue: ''
    };
  },
  computed: {
    title() {
      if (this.addForm.id) {
        return '编辑';
      } else {
        return '新增';
      }
    }
  },
  watch: {},
  created() {
    this.city = provinces();
  },
  mounted() {},
  methods: {
    // 提交
    btnOk() {
      this.$refs.addFormRef.validate(async validate => {
        if (validate) {
          if (this.addForm.id) {
            try {
              await editCompanys({
                ...this.addForm,
                isFamous: this.addForm.isFamous === 1,
                city: this.cityValue ? this.cityValue : this.addForm.city,
                province: this.provinceValue ? this.provinceValue : this.addForm.province
              });
              this.$emit('btnOk');
              this.onClose();
              this.$message.success('修改成功');
            } catch (err) {
              this.$message.error('操作失败');
            }
          } else {
            try {
              await addCompanys({
                ...this.addForm,
                isFamous: this.addForm.isFamous === 1,
                city: this.cityValue ? this.cityValue : this.addForm.city,
                province: this.provinceValue ? this.provinceValue : this.addForm.province
              });
              this.$emit('btnOk');
              this.$emit('update:showaddcompany', false);
              this.$message.success('添加成功');
            } catch (err) {
              this.$message.error('操作失败');
            }
          }
        }
      });
    },
    // 关闭
    onClose() {
      this.$refs.addFormRef.resetFields();
      this.$emit('onClose');
      this.$emit('update:showaddcompany', false);
    },
    // 城市选择
    cityChange(v) {
      this.province = citys(v);
      this.cityValue = v;
    },
    provincechange(v) {
      this.provinceValue = v;
    }
  }
};
</script>
<style lang="less" scoped></style>
